<script setup lang="ts">
import {ref} from 'vue'
import FJIcon from './icons/feiji.vue'
import fullScreenIcon from './icons/fullScreen.vue'
import noScreenIcon from './icons/noScreen.vue'

interface ViewDataItem {
  label: string;
  background: string;
  clickCallBack: string;
}

const props = defineProps({
  viewData: {
    type: Array as () => ViewDataItem[],
    default: () => {
      return [
        {
          label: '不加油',
          background: '#969ab7',
          clickCallBack: '0',
        },
        {
          label: '未派工',
          background: '#f49cac',
          clickCallBack: '1',
        },
        {
          label: '已派工',
          background: '#fce0b9',
          clickCallBack: '2',
        },
        {
          label: '已接受',
          background: '#f5bb8c',
          clickCallBack: '3',
        },
        {
          label: '已开始',
          background: '#acf2da',
          clickCallBack: '4',
        },
        {
          label: '已结束',
          background: '#7a6fe9',
          clickCallBack: '5',
        },
      ]
    }
  },
  index: {
    type: Number,
    default: 0
  },
  rowCount: {
    type: Number,
    default: 3
  },
  isScreen: {
    type: Boolean,
    default: false,
  }
})

const emit = defineEmits(['emitClick', 'update:isScreen'])

const chunkArray = <T>(arr: T[], size: number): T[][] => {
  const chunks: T[][] = [];
  for (let i = 0; i < arr.length; i += size) {
    chunks.push(arr.slice(i, i + size));
  }
  return chunks;
}

const colClick = (str: string, rIndex: number, cIndex: number) => {
  // console.log(rIndex, cIndex);
  activeColIndex.value = cIndex; // 更新激活的列索引
  activeRowIndex.value = rIndex; // 更新激活的列索引
  emit('emitClick', {
    key: str,
  })
}

const screenBtnClick = () => {
  emit('update:isScreen', !props.isScreen)
}

const activeColIndex = ref<number | null>(null);
const activeRowIndex = ref<number | null>(null);


</script>

<template>
  <div class="info">
    <div class="info_row" v-for="(row, rIndex) in chunkArray(viewData, rowCount)" :key="'row'+ rIndex">
      <div class="info_row_col" v-for="(col, cIndex) in row" :key="'col' + cIndex"
           @click="colClick(col.clickCallBack, rIndex, cIndex)"
           :class="{ 'active': activeColIndex === cIndex && activeRowIndex===rIndex }">
        <el-icon class="info_row_col_icon" :size="40" :color="'#2b384a'" :style="{
          background: col.background ? col.background : '#FF00FF'
        }">
          <component :is="FJIcon"></component>
        </el-icon>
        {{ col.label }}
      </div>
    </div>
    <!--    <div class="info_row">-->
    <!--      <div class="info_row_col">-->
    <!--        <el-icon class="info_row_col_icon" :size="40" :color="'#2b384a'">-->
    <!--          <component :is="FJIcon"></component>-->
    <!--        </el-icon>-->
    <!--        不加油-->
    <!--      </div>-->
    <!--      <div class="info_row_col">-->
    <!--        <el-icon class="info_row_col_icon" :size="40" :color="'#2b384a'">-->
    <!--          <component :is="FJIcon"></component>-->
    <!--        </el-icon>-->
    <!--        不加油-->
    <!--      </div>-->
    <!--      <div class="info_row_col">-->
    <!--        <el-icon class="info_row_col_icon" :size="40" :color="'#2b384a'">-->
    <!--          <component :is="FJIcon"></component>-->
    <!--        </el-icon>-->
    <!--        不加油-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <div class="info_row">-->
    <!--      <div class="info_row_col">-->
    <!--        <el-icon class="info_row_col_icon" :size="40" :color="'#2b384a'">-->
    <!--          <component :is="FJIcon"></component>-->
    <!--        </el-icon>-->
    <!--        不加油-->
    <!--      </div>-->
    <!--      <div class="info_row_col">-->
    <!--        <el-icon class="info_row_col_icon" :size="40" :color="'#2b384a'">-->
    <!--          <component :is="FJIcon"></component>-->
    <!--        </el-icon>-->
    <!--        不加油-->
    <!--      </div>-->
    <!--      <div class="info_row_col">-->
    <!--        <el-icon class="info_row_col_icon" :size="40" :color="'#2b384a'">-->
    <!--          <component :is="FJIcon"></component>-->
    <!--        </el-icon>-->
    <!--        不加油-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="info_btn" @click="screenBtnClick">
      <el-icon v-if="!isScreen" :size="20" :color="'#FFF'" style="position: relative;top: 4px;">
        <fullScreenIcon/>
      </el-icon>
      <el-icon v-else :size="16" :color="'#FFF'" style="position: relative; top: 6px;">
        <no-screen-icon/>
      </el-icon>
    </div>
  </div>
</template>

<style scoped lang="scss">
.info {
  position: relative;
  width: 320px;
  height: 220px;
  background: #2a2c3b;
  color: #fff;
  border-radius: 8px;
  text-align: center;
  box-shadow: 10px 10px 12px #2a2c3b;
  display: inline-block;
  margin-right: 26px;
  vertical-align: top;

  &_btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f83c68;
    position: absolute;
    bottom: -18px;
    left: -16px;
    cursor: pointer;
  }

  &_row {
    &:first-child {
      border-bottom: 1px solid #43455e;
    }

    &_col {
      width: 60px;
      height: 88px;
      margin: 12px;
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;

      &.active {
        color: #f83c68;
      }

      &_icon {
        width: 54px;
        height: 54px;
        line-height: 54px;
        display: block;
        border-radius: 50%;
        background: #00faff;
        margin: 0 auto 10px;

        & > svg {
          position: relative;
          top: 4px;
          //left: 1px;
        }
      }
    }
  }
}
</style>